export const circleRunning = (G6) => {
  const dashArray = [
    [ 0, 1 ],
    [ 0, 2 ],
    [ 1, 2 ],
    [ 0, 1, 1, 2 ],
    [ 0, 2, 1, 2 ],
    [ 1, 2, 1, 2 ],
    [ 2, 2, 1, 2 ],
    [ 3, 2, 1, 2 ],
    [ 4, 2, 1, 2 ]
  ];
  const lineDash = [ 4, 2, 1, 2 ];
  const interval = 9; // lineDash 的和
  G6.registerEdge('line-dash', {
    afterDraw(cfg, group) {
      // 获得该边的第一个图形，这里是边的 path
      const shape = group.get('children')[0];
      // 获得边的 path 的总长度
      const length = shape.getTotalLength();
      let totalArray = [];
      // 计算出整条线的 lineDash
      for (let i = 0; i < length; i += interval) {
        totalArray = totalArray.concat(lineDash);
      }
      let index = 0;
      // 边 path 图形的动画
      shape.animate({
        // 动画重复
        repeat: true,
        // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
        onFrame() {
          const cfg = {
            lineDash: dashArray[index].concat(totalArray)
          };
          // 每次移动 1
          index = (index + 1) % interval;
          // 返回需要修改的参数集，这里只修改了 lineDash
          return cfg;
        }
      }, 3000);  // 一次动画的时长为 3000
    }
  }, 'cubic');
}

export const bindShapeAction = (G6) => {
  // 背景动画
  G6.registerNode('background-animate', {
    afterDraw(cfg, group) {
      const r = cfg.size / 2;
      const back1 = group.addShape('circle', {
        zIndex: -3,
        attrs: {
          x: 0,
          y: 0,
          r,
          fill: cfg.color,
          opacity: 0.6
        }
      });
      const back2 = group.addShape('circle', {
        zIndex: -2,
        attrs: {
          x: 0,
          y: 0,
          r,
          fill: cfg.color,
          opacity: 0.6
        }
      });
      const back3 = group.addShape('circle', {
        zIndex: -1,
        attrs: {
          x: 0,
          y: 0,
          r,
          fill: cfg.color,
          opacity: 0.6
        }
      });
      group.sort(); // 排序，根据 zIndex 排序
      back1.animate({ // 逐渐放大，并消失
        r: r + 10,
        opacity: 0.1,
        repeat: true // 循环
      }, 3000, 'easeCubic', null, 0); // 无延迟
      back2.animate({ // 逐渐放大，并消失
        r: r + 10,
        opacity: 0.1,
        repeat: true // 循环
      }, 3000, 'easeCubic', null, 1000); // 1 秒延迟
      back3.animate({ // 逐渐放大，并消失
        r: r + 10,
        opacity: 0.1,
        repeat: true // 循环
      }, 3000, 'easeCubic', null, 2000); // 2 秒延迟
    }
  }, 'circle');
}